(function () {
    // 顶部导航&二级菜单
    $(function () {
        for (let i = 1; i <= 5; i++) {
            $(".topnavright").children().eq(i).on("mouseenter", function (el) {
                $(this).find("span").css({ color: "#ff1e32" })
                $(this).css({ backgroundColor: "#fff" })
                $(this).find(".menu_box").css({ display: "block" })
                $(this).find("i").css({
                    borderColor: "transparent transparent #ff1e32 transparent",
                    top: "9px"
                })
            })
            $(".topnavright").children().eq(i).on("mouseleave", function () {
                $(this).find("span").css({ color: "#999" })
                $(this).css({ backgroundColor: "" })
                $(this).find(".menu_box").css({ display: "none" })
                $(this).find("i").css({
                    borderColor: "#999 transparent transparent  transparent",
                    top: "13px"
                })
            })
        }
        $(".menu_box").children().on("mouseenter", function () {
            $(this).css({
                color: "#ff1e32",
            })
        })
        $(".menu_box").children().on("mouseleave", function () {
            $(this).css({
                color: "#999",
            })
        })
    })

    // 地址选择/tab栏切换&二级菜单
    $(function () {
        $(".iptmsg_box").on("click", function () {
            if ($(".iptw").find(".box").css("display") == "block") {
                $(".iptw").find(".box").css("display", "none")
                return
            }
            $(".iptw").find(".box").css("display", "block")
        })

        $(".iptw").find(".tli").on("click", function () {
            $(this).addClass("act").siblings().removeClass("act")
            $(".iptw").find(".boxlist").addClass("current").eq($(this).index()).removeClass("current")
        })

        $(".iptw").find(".boxlist").eq(0).find(".tcli2>a").on("click", function () {
            $(".iptw").find(".boxlist").eq(0).find(".tcli2>a").removeClass("selected")
            $(this).addClass("selected")
        })
        $(".iptw").find(".boxlist").eq(1).find(".tcli>a").on("click", function () {
            $(".iptw").find(".boxlist").eq(1).find(".tcli>a").removeClass("selected")
            $(this).addClass("selected")
        })
        $(".iptw").find(".boxlist").eq(2).find(".tcli>a").on("click", function () {
            $(".iptw").find(".boxlist").eq(2).find(".tcli>a").removeClass("selected")
            $(this).addClass("selected")
        })

        $(".boxclose").on("click", function () {
            $(".iptw").find(".box").css("display", "none")
        })
    })

    // 商品选择渲染
    const shopNum = function () {
        let znum = 0;
        let zmoney = 0;
        if ($(".goods").find("input:checked").length > 0) {
            $(".gobuy").removeClass("current")
            $(".goods").find("input:checked").each(function (index, el) {
                znum += Number($(el).parents(".gooditm").find(".num").val())
                zmoney += Number($(el).parents(".gooditm").find(".sumrow").text())
            })
            $(".allgoods").find("em").eq(0).text(znum)
            $(".allgoods").find("em").eq(1).text("￥" + zmoney)
            $(".cart").find(".cartinfo").children().eq(1).text(`商品应付总计: ¥${zmoney}`)
            $(".allmoney").find(".itm").eq(1).text(`商品应付总计: ¥${zmoney}`)
        } else {
            $(".gobuy").addClass("gobuy current")
            $(".allgoods").find("em").eq(0).text("￥0")
            $(".allgoods").find("em").eq(1).text("￥0")
            $(".cart").find(".cartinfo").children().eq(1).text("商品应付总计: ¥ 0")
            $(".allmoney").find(".itm").eq(1).text("商品应付总计: ¥0")
        }
    }

    // 全选&全不选
    const choice = function () {
        $(".head").find(".selectAll").on("click", function () {
            $(".ware").find(".u-chk").prop("checked", $(".head").find(".selectAll").prop("checked"))
            $(".goods").find(".u-chk").prop("checked", $(".head").find(".selectAll").prop("checked"))
            $(".ttbar").find(".u-chk").prop("checked", $(".head").find(".selectAll").prop("checked"))
            shopNum()
        })
        $(".ttbar").find(".u-chk").on("click", function () {
            $(".head").find(".selectAll").prop("checked", $(".ttbar").find(".u-chk").prop("checked"))
            $(".ware").find(".u-chk").prop("checked", $(".ttbar").find(".u-chk").prop("checked"))
            $(".goods").find(".u-chk").prop("checked", $(".ttbar").find(".u-chk").prop("checked"))
            shopNum()
        })
        for (let i = 0; i < $(".ware").find(".u-chk").length; i++) {
            $(".ware").find(".u-chk").eq(i).on("click", function () {
                let Num1 = $(".ware").find(".u-chk").length;
                let Num2 = $(".ware").find("input:checked").length;
                let Temp = Num1 == Num2
                $(".goods").eq(i).find(".u-chk").prop("checked", $(".ware").eq(i).find(".u-chk").prop("checked"))
                $(".head").find(".selectAll").prop("checked", Temp)
                $(".ttbar").find(".u-chk").prop("checked", Temp)
                shopNum(i)
            })
            for (let n = 0; n < $(".goods").eq(i).find(".u-chk").length; n++) {
                $(".goods").eq(i).find(".u-chk").eq(n).on("click", function () {
                    let num1 = $(".goods").eq(i).find(".u-chk").length;
                    let num2 = $(".goods").eq(i).find("input:checked").length;
                    // console.log(num2);
                    let temp = num1 == num2
                    // console.log(temp);
                    $(".ware").find(".u-chk").eq(i).prop("checked", temp)
                    $(".head").find(".selectAll").prop("checked", temp)
                    $(".ttbar").find(".u-chk").prop("checked", temp)
                    if ($(".ware").find(".u-chk").eq(i).prop("checked")) {
                        $(".ware").find(".u-chk").eq(i).triggerHandler("click")
                    }
                    shopNum()
                })
            }
        }
    }

    // 查询渲染
    const Qurend = function () {
        // 数据传输
        let userphone = JSON.parse(localStorage.getItem("user")).uphone;
        let data = {
            uphone: userphone
        }
        // 查询渲染
        $.ajax({
            url: "/chartlist",
            type: "post",
            data,
            dataType: "json",
            success(res) {
                if (res.data == "") {
                    $(".warebox").html(`<div class="nocart">
                    <div class="wrap">
                        <p>购物车里空空如也，赶紧去 <a href="./index.html">逛逛吧></a></p>
                    </div>
                </div>`)
                    return
                }
                let numname = 0;
                let str1 = ` 
        <div class="ware">
            <input type="checkbox" name="cartAll" class="u-chk">
            <span class="warename"><a href="#">${res.data[0].shopname}</a></span>
        </div>`;
                let str2 = ``;
                let dat = res.data[0].shopname;
                res.data.forEach(el => {
                    str2 += `
            <div class="goods clearFix">
            <ul class="m-goods clearFix">
                <li class="gooditm clearFix">
                    <div class="col col1">
                        <input type="checkbox" class="u-chk">
                    </div>
                    <div class="col col2">
                        <a href="#" class="imgwrap">
                            <img src="${el.pimg}" alt="">
                        </a>
                        <div class="txtwrap">
                            <p class="goodtlt">
                                <a href="#">${el.pname}</a>
                            </p>
                            <span class="returninfo clearFix"><img src="./images/chart/test.png"
                                    alt=""> 支持7天无忧退货</span>
                        </div>
                        <div class="skudesc">
                            <p class="skuline">尺码 : ${el.psize}</p>
                            <p class="skuline">颜色 : ${el.pcolor}</p>
                        </div>
                    </div>
                    <div class="col col3">
                        <div class="newprice">
                            <span>${el.pprice}</span>
                        </div>
                    </div>
                    <div class="col col4">
                        <div class="buyBox2 clearFix">
                            <span class="buybox2">
                                <a href="javascript:void(0)" class="minus">-</a>
                                <input type="text" value="${el.pnum}" class="num" data="${++numname}">
                                <a href="javascript:void(0)" class="plus">+</a>
                            </span>
                        </div>
                    </div>
                    <div class="col col5">
                        <span class="sumrow">${el.pmoney}</span>
                    </div>
                    <div class="col col6">
                        <a href="javascript:void(0)" class="opt">删除</a>
                    </div>
                </li>
            </ul>`
                    if (dat != el.shopname) {
                        str2 = str2 + str1
                    }
                    dat = el.shopname
                });
                $(".warebox").html(str1 + str2)
                shopNum()
                choice()

                $(".minus").each((index, el) => {
                    let shopnum = $(".buyBox2").find(".num").eq(index).val()
                    $(el).on("click", function () {
                        --shopnum
                        if (shopnum < 0) {
                            shopnum = 0
                        }
                        $(".buyBox2").find(".num").eq(index).val(shopnum)
                        this.size = $(this).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        this.color = $(this).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        this.num = $(".buyBox2").find(".num").eq(index).val();
                        this.price = $(this).parents(".gooditm").find(".newprice").children().text();
                        chartNum(this.size, this.color, this.num, this.price)
                        shopNum()
                    })
                })

                $(".plus").each((index, el) => {
                    let shopnum = $(".buyBox2").find(".num").eq(index).val()
                    $(el).on("click", function () {
                        ++shopnum
                        $(".buyBox2").find(".num").eq(index).val(shopnum)
                        this.size = $(this).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        this.color = $(this).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        this.num = $(".buyBox2").find(".num").eq(index).val();
                        this.price = $(this).parents(".gooditm").find(".newprice").children().text();
                        chartNum(this.size, this.color, this.num, this.price)
                        shopNum()
                    })
                })

                // 商品信息删除事件绑定
                $(".col6").find(".opt").each((index, el) => {
                    $(el).on("click", function () {
                        el.name = $(el).parents(".gooditm").find(".goodtlt").children().text();
                        el.size = $(el).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        el.color = $(el).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        shopdel(el.name, el.size, el.color)
                        Qurend()
                    })
                })
                // 删除选中商品
                $(".totalbox").find(".opt").on("click", function () {
                    $(".gooditm").find(".col1").find("input:checked").each((index, el) => {
                        el.zname = $(el).parents(".gooditm").find(".goodtlt").children().text();
                        el.zsize = $(el).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        el.zcolor = $(el).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        shopdel(el.zname, el.zsize, el.zcolor)
                    })
                    Qurend()
                })
            }
        })
    }

    // 登录渲染&退出删除登录用户的缓存
    const userrend = function () {
        let user = JSON.parse(localStorage.getItem("user"))
        if (user) {
            $(".topnavleft").children().eq(0).html(user.uphone)
            let str = `<a href="javascript:void(0)">退出</a>`
            $(".topnavleft").children().eq(1).children().html(str)
            $(".topnavleft").children().eq(1).on("click", function (e) {
                localStorage.removeItem("user")
                window.location.reload()
            })
            $(".cartbox").css({
                display: "block"
            })
            $(".nocart").css({
                display: "none"
            })
        }
    }

    // 修改商品数量
    const chartNum = function (size, color, num, price) {
        // 数据传输
        let userphone = JSON.parse(localStorage.getItem("user")).uphone;
        let data2 = {
            uphone: userphone,
            psize: size,
            pcolor: color,
            pnum: num,
            pprice: price
        }
        // console.log(data);
        // 添加
        $.ajax({
            url: "/chartNumber",
            type: "post",
            data: data2,
            dataType: "json",
            success(res) {
                Qurend()
                console.log(data2);
                console.log(res);
            }
        })
    }

    // 商品删除
    const shopdel = function (name, size, color) {
        // 数据传输
        let userphone = JSON.parse(localStorage.getItem("user")).uphone;
        let data3 = {
            uphone: userphone,
            pname: name,
            psize: size,
            pcolor: color,
        }
        // console.log(data);
        // 添加
        $.ajax({
            url: "/chart/del",
            type: "post",
            data: data3,
            dataType: "json",
            success(res) {
                console.log(res);
            }
        })
    }

    // 商品&登录渲染调用,
    $(function () {
        userrend()
        Qurend()
        // 数据传输
        let userphone = JSON.parse(localStorage.getItem("user")).uphone;
        let data = {
            uphone: userphone
        }
        // 查询渲染
        $.ajax({
            url: "/chartlist",
            type: "post",
            data,
            dataType: "json",
            success(res) {
                if (res.data == "") {
                    $(".warebox").html(`<div class="nocart">
                    <div class="wrap">
                        <p>购物车里空空如也，赶紧去 <a href="./index.html">逛逛吧></a></p>
                    </div>
                </div>`)
                    return
                }
                let numname = 0;
                let str1 = ` 
         <div class="ware">
             <input type="checkbox" name="cartAll" class="u-chk">
             <span class="warename"><a href="#">${res.data[0].shopname}</a></span>
         </div>`;
                let str2 = ``;
                let dat = res.data[0].shopname;
                res.data.forEach(el => {
                    str2 += `
             <div class="goods clearFix">
             <ul class="m-goods clearFix">
                 <li class="gooditm clearFix">
                     <div class="col col1">
                         <input type="checkbox" class="u-chk">
                     </div>
                     <div class="col col2">
                         <a href="#" class="imgwrap">
                             <img src="${el.pimg}" alt="">
                         </a>
                         <div class="txtwrap">
                             <p class="goodtlt">
                                 <a href="#">${el.pname}</a>
                             </p>
                             <span class="returninfo clearFix"><img src="./images/chart/test.png"
                                     alt=""> 支持7天无忧退货</span>
                         </div>
                         <div class="skudesc">
                             <p class="skuline">尺码 : ${el.psize}</p>
                             <p class="skuline">颜色 : ${el.pcolor}</p>
                         </div>
                     </div>
                     <div class="col col3">
                         <div class="newprice">
                             <span>${el.pprice}</span>
                         </div>
                     </div>
                     <div class="col col4">
                         <div class="buyBox2 clearFix">
                             <span class="buybox2">
                                 <a href="javascript:void(0)" class="minus">-</a>
                                 <input type="text" value="${el.pnum}" class="num" data="${++numname}">
                                 <a href="javascript:void(0)" class="plus">+</a>
                             </span>
                         </div>
                     </div>
                     <div class="col col5">
                         <span class="sumrow">${el.pmoney}</span>
                     </div>
                     <div class="col col6">
                         <a href="javascript:void(0)" class="opt">删除</a>
                     </div>
                 </li>
             </ul>`
                    if (dat != el.shopname) {
                        str2 = str2 + str1
                    }
                    dat = el.shopname
                });
                $(".warebox").html(str1 + str2)
                $(".goods").find(".num").each((index, el) => {
                    $(el).datanum = index
                })
                shopNum()
                choice()

                // 商品信息修改事件绑定
                $(".minus").each((index, el) => {
                    let shopnum = $(".buyBox2").find(".num").eq(index).val()
                    $(el).on("click", function () {
                        --shopnum
                        if (shopnum < 0) {
                            shopnum = 0
                        }
                        $(".buyBox2").find(".num").eq(index).val(shopnum)
                        this.size = $(this).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        this.color = $(this).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        this.num = $(".buyBox2").find(".num").eq(index).val();
                        this.price = $(this).parents(".gooditm").find(".newprice").children().text();
                        chartNum(this.size, this.color, this.num, this.price)
                        shopNum()
                    })
                })

                $(".plus").each((index, el) => {
                    let shopnum = $(".buyBox2").find(".num").eq(index).val()
                    $(el).on("click", function () {
                        ++shopnum
                        $(".buyBox2").find(".num").eq(index).val(shopnum)
                        this.size = $(this).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        this.color = $(this).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        this.num = $(".buyBox2").find(".num").eq(index).val();
                        this.price = $(this).parents(".gooditm").find(".newprice").children().text();
                        chartNum(this.size, this.color, this.num, this.price)
                        shopNum()
                    })
                })

                // 商品信息删除事件绑定
                $(".col6").find(".opt").each((index, el) => {
                    $(el).on("click", function () {
                        el.name = $(el).parents(".gooditm").find(".goodtlt").children().text();
                        el.size = $(el).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        el.color = $(el).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        shopdel(el.name, el.size, el.color)
                        Qurend()
                    })
                })
                // 删除选中商品
                $(".totalbox").find(".opt").on("click", function () {
                    console.log($(".col1").find("input:checked"));
                    $(".gooditm").find(".col1").find("input:checked").each((index, el) => {
                        el.zname = $(el).parents(".gooditm").find(".goodtlt").children().text();
                        el.zsize = $(el).parents(".gooditm").find(".skuline")[0].innerText.split(": ")[1];
                        el.zcolor = $(el).parents(".gooditm").find(".skuline")[1].innerText.split(": ")[1];
                        shopdel(el.zname, el.zsize, el.zcolor)
                    })
                    Qurend()
                })
            }
        })



    })


})()